<template>
  <div class="computed">
    <div>{{ firstName }}---{{ sercondName }}</div>
    <button @click="changeName">改变姓名</button>
    <div>{{ fullName }}</div>
    <div>{{ fullName1 }}</div>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  setup () {
    const firstName = ref('firstName')
    const sercondName = ref('secondName')
    // 传入一个getter函数
    const fullName = computed(() => firstName.value + '-' + sercondName.value)
    // 传入一个getter对象
    const fullName1 = computed({
      get: () => firstName.value + '-' + sercondName.value,
      set: (newvalue) => {
        console.log(newvalue)
        const names = newvalue.split(' ')
        firstName.value = names[0]
        sercondName.value = names[1]
      }
    })
    const changeName = () => {
      firstName.value = 'why'
      fullName1.value = 'hwuw koa'
    }
    return {
      firstName,
      sercondName,
      changeName,
      fullName,
      fullName1
    }
  }
}
</script>
<style scoped>
</style>
